//  vuex 的权限模块
import { asyncRoutes, constantRoutes } from "@/router";

// vuex 中的 permission 模块用来存放当前的 静态路由 + 当前用户的 权限路由
const state = {
  routes: constantRoutes // 所有人默认的静态路由
};

const mutations = {
  // newRoutes 可以认为是 用户登录 通过权限所得到的 动态路由的部分
  setRoutes(state, newRoutes) {
    //  下面这么写不对 不是语法不对 是 业务不对
    state.routes = [...state.routes, ...newRoutes];
    //  应该是每次更新 都应该在静态路由的基础上进行追加
    state.routes = [...constantRoutes, ...newRoutes];
  }
};

const actions = {
  // 筛选权限路由
  // 第二个参数为当前用户所拥有的额菜单权限
  // async 是所有的动态路由
  filterRoutes(context, menus) {
    const routes = [];
    // 筛选出动态路由中和 menus 中能够对上的路由
    menus.forEach(key => {
      // key 就是标识
      //  asyncRoutes 找 有没有对象中的 name 属性等于 key 的 如果找不到就没有权限  如果找到了就筛选出来
      routes.push(...asyncRoutes.filter(item => item.name === key)); // 得到一个数组  有可能有元素 也可能没有元素
    });

    // 得到的 routes 是所有模块中满足权限要求的路由数组
    //  routes 就是当前用户所拥有的  动态路由权限
    context.commit("setRoutes", routes); // 将动态路由提交给 mutations
    return routes; // 这里之所以要 return 是因为 state 数据是用来显示左侧菜单用的 return 是给路由 addRoutes yongde
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};
